import { Avatar, Button, Col, Empty, Input, List, Row, Tabs } from 'antd';
import { ChangeEvent, useContext, useMemo, useState } from 'react';
import { GlobalShortcutContext } from '../mconfig';
import { GlobalShortcutKeyAPI } from '../common/type';
import _ from 'lodash';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import cls from 'classnames';
import { PhoneOutlined } from '@ant-design/icons';

export const ShortPhoneForm: React.FC<
  GlobalShortcutKeyAPI.IShortPhoneForm
> = () => {
  const { prefixCls, mailOrPhoneSuccess } = useContext(GlobalShortcutContext);

  /**
   * 保存选中的tab页面
   */
  const [tabsPaneKey, setTabsPaneKey] = useState<string>('1');
  const tabsChanage = (activeKey: string) => {
    setTabsPaneKey(activeKey);
  };

  /**
   * 手机拨号键盘
   */
  let pheoneNumber = [
    {
      number: '1',
      letter: null,
    },
    {
      number: '2',
      letter: 'ABC',
    },
    {
      number: '3',
      letter: 'DEF',
    },
    {
      number: '4',
      letter: 'GHI',
    },
    {
      number: '5',
      letter: 'JKL',
    },
    {
      number: '6',
      letter: 'MNO',
    },
    {
      number: '7',
      letter: 'PQRS',
    },
    {
      number: '8',
      letter: 'TUV',
    },
    {
      number: '9',
      letter: 'WXYZ',
    },
    {
      number: '*',
      letter: null,
    },
    {
      number: '0',
      letter: null,
    },
    {
      number: '#',
      letter: null,
    },
  ];

  /**
   * 保存拨号键盘输入的值
   */
  const [phoneKeyValue, setPhoneKeyValue] = useState<string>('');

  const phoneUserList = [
    {
      id: '1',
      name: '张三',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
    {
      id: '2',
      name: '李四',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
    {
      id: '3',
      name: '王朝',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
    {
      id: '4',
      name: '马汉',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
    {
      id: '5',
      name: '张龙',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
    {
      id: '6',
      name: '赵虎',
      phone: '15701070604',
      phoneState: '2分钟',
      time: '2022-12-13 19:58:23',
    },
  ];

  /**
   * 返回tab 页面内容
   */
  const tabItems = useMemo(() => {
    let tabPaneBox = [
      {
        label: '拨号键盘',
        key: '1',
        children: (
          <Row className={prefixCls + 'phoneTabsStyoles-phoneRow'}>
            <Col
              span={24}
              className={prefixCls + 'phoneTabsStyoles-phoneRow-phoneValues'}
            >
              <Input
                placeholder="输入电话号码"
                value={phoneKeyValue}
                allowClear
                onChange={(e: ChangeEvent<HTMLInputElement>) => {
                  setPhoneKeyValue(e.target.value);
                }}
              />
            </Col>
            <Col span={24}>
              <Row className={prefixCls + 'phoneTabsStyoles-keyboardStyles'}>
                {pheoneNumber?.map((item: any) => {
                  return (
                    <Col
                      span={8}
                      key={item?.number + 'phoneNumber'}
                      className={
                        prefixCls +
                        'phoneTabsStyoles-keyboardStyles-colBtnStyle'
                      }
                    >
                      <Button
                        type="default"
                        onMouseOut={(event: any) => {
                          event?.target?.nodeName == 'BUTTON'
                            ? event?.target?.blur()
                            : event.target.parentNode.blur();
                        }}
                        onClick={() => {
                          let newPhone: string = phoneKeyValue + item?.number;
                          setPhoneKeyValue(newPhone);
                        }}
                      >
                        <div>{item?.number}</div>
                        {item?.letter && (
                          <div
                            style={{
                              fontSize: 14,
                            }}
                          >
                            {item?.letter}
                          </div>
                        )}
                      </Button>
                    </Col>
                  );
                })}
              </Row>
            </Col>
            <Col span={24}>
              <Button
                type="primary"
                style={{
                  width: '80%',
                  marginTop: 15,
                }}
              >
                呼叫
              </Button>
            </Col>
          </Row>
        ),
      },
      {
        label: '呼叫历史',
        key: '2',
        children: (
          <ScrollBarLayout
            style={{
              padding: '0px 0px 5px',
            }}
          >
            {phoneUserList && phoneUserList?.length > 0 ? (
              <div
                className={cls(
                  'compile-avatar',
                  prefixCls + 'phoneTabsStyoles-phoneHistoryList',
                )}
              >
                <List
                  itemLayout="horizontal"
                  dataSource={phoneUserList}
                  renderItem={(item: any) => (
                    <List.Item onClick={() => {}}>
                      <List.Item.Meta
                        avatar={
                          <Avatar size="large" icon={<PhoneOutlined />} />
                        }
                        title={
                          <>
                            <div
                              style={{
                                fontWeight: 600,
                              }}
                            >
                              {item?.name}
                            </div>
                            <div>{item?.time}</div>
                          </>
                        }
                        description={
                          <>
                            <div>{item?.phone}</div>
                            <div>{item?.phoneState}</div>
                          </>
                        }
                      />
                    </List.Item>
                  )}
                />
              </div>
            ) : (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="暂无数据"
              />
            )}
          </ScrollBarLayout>
        ),
      },
    ];
    return tabPaneBox;
  }, [tabsPaneKey, phoneKeyValue, phoneUserList]);

  return (
    <>
      {mailOrPhoneSuccess == 'PhoneSuccess' ? (
        <> </>
      ) : (
        <Tabs
          activeKey={tabsPaneKey}
          destroyInactiveTabPane={true}
          centered
          onChange={tabsChanage}
          className={prefixCls + 'phoneTabsStyoles'}
          items={tabItems}
        />
      )}
    </>
  );
};
